<template>
    <el-card class="box-card">
        <div class="tip">
            <span style="color: #409EFF"><i class="el-icon-warning"> 实名认证主体和电子合同及电子发票主体一致，且实名认证主体一旦提交不可修改，请使用企业真实信息认证。</i></span><br/>
        </div>
        <el-form ref="form" :model="form" label-width="300px" class="form" size="small">
            <p class="info">营业执照</p>
            <div>
                <el-form-item label="企业证件类型：" prop="documentType" required :rules="{required: true, message: '请选择企业证件类型', trigger: 'change'}">
                    <el-select v-model="form.documentType">
                        <el-option v-for="item in documentTypes" :key="item.value" :label="item.name" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="企业证书：" prop="images.certificate" :rules="{required: true, message: '请选择企业证书'}">
                    <p class="prompt">1、请确保企业证书照图片所有信息清晰可见，内容真实有效，无任何修改。</p>
                    <p class="prompt">2、推荐上传扫描文件，自拍照请尽量降低反光。</p>
<!--                    <p class="prompt">3、支持jpg、jpeg、png格式图片，大小不超过20M。</p>-->
                    <el-upload
                            class="avatar-uploader"
                            ref="certificateImg"
                            :action="$uri + '/api/file/upload'"
                            :show-file-list="false"
                            accept="image/jpeg,image/png"
                            :on-success="certificateImgSuccess"
                            :on-change="certificateImgChange"
                            :file-list="certificateImgFileList"
                            :data="{type:'2',orgId: $store.getters.getUserInfo.orgId,orgNum: $store.getters.getUserInfo.orgNum,companyId: $store.getters.getUserInfo.companyId}"
                            :auto-upload="false">
                        <img v-if="form.images.certificate" :src="form.images.certificate" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <p style="margin: 0;line-height: 20px">企业法人营业执照</p>
                </el-form-item>
                <el-form-item label="企业名称：" prop="enterpriseName" required :rules="{required: true, message: '企业名称不能为空'}" style="width: 750px;">
                    <el-input v-model="form.enterpriseName" placeholder="企业名称和企业证书保持一致，提交不可修改"></el-input>
                </el-form-item>
                <el-form-item label="证件号码：" prop="idCard" required :rules="{required: true, message: '请填写证件号码'}" style="width: 750px;">
                    <el-input v-model="form.idCard" placeholder="请输入企业证件号码"></el-input>
                </el-form-item>
                <el-form-item label="成立时间：" prop="createTime" required :rules="{required: true, message: '请选择成立时间'}" style="width: 750px;">
                    <el-date-picker v-model="form.createTime" type="date" placeholder="请选择日期"></el-date-picker>
                </el-form-item>
                <el-form-item label="经营期限：" required style="width: 850px;margin-bottom: 0">
                    <span style="float: left;">
                        <el-form-item prop="businessPeriodStart" required :rules="{required: true, message: '请选择经营起始期限'}">
                            <el-date-picker :picker-options="pickerOptionstart" v-model="form.businessPeriodStart" type="date" placeholder="请选择起始时间" style="width: 210px"></el-date-picker>
                        </el-form-item>
                    </span>
                    <span style="float: left;">&ensp;至&ensp;</span>
                    <span style="float: left;">
                        <el-form-item prop="businessPeriodEnd" :rules="{required: !form.businessPeriodLong, message: '请选择经营失效期限'}">
                            <el-date-picker :picker-options="pickerOptionend" :disabled="form.businessPeriodLong" v-model="form.businessPeriodEnd" type="date" placeholder="请选择失效时间" style="width: 210px"></el-date-picker>
                        </el-form-item>
                    </span>
                    <span style="margin-left: 10px"><el-checkbox v-model="form.businessPeriodLong" @change="setBusinessPeriod">长期有效</el-checkbox></span>
                </el-form-item>
                <el-form-item label="注册资金：" prop="capital" required :rules="{required: true, message: '请选择注册资金', trigger: 'change'}">
                    <el-select v-model="form.capital" placeholder="请选择">
                        <el-option v-for="item in capitals" :key="item.value" :label="item.name" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="企业地址：" prop="address" required :rules="{required: true, message: '请选择企业地址', trigger: 'change'}">
                    <el-cascader :props="form.selectAddress" v-model="form.address"></el-cascader>
                </el-form-item>
                <el-form-item prop="detailedAddress" required :rules="{required: true, message: '请填写企业地址'}" style="width: 750px;">
                    <el-input v-model="form.detailedAddress" placeholder="请填写企业详细地址"></el-input>
                </el-form-item>
                <el-form-item label="登记机关：" prop="registrationAuthority" required :rules="{required: true, message: '请填写登记机关'}" style="width: 750px;">
                    <el-input v-model="form.registrationAuthority" placeholder="请输入登记机关"></el-input>
                </el-form-item>
            </div>
            <p class="info">企业基本信息</p>
            <div>
                <el-form-item label="企业LOGO：" prop="images.corporateLogo" :rules="{required: true, message: '请选择企业证书'}">
                    <p class="prompt">1、请上传JPG/PNG文件。</p>
                    <p class="prompt">2、建议高度、宽度不超过300像素。</p>
<!--                    <p class="prompt">3、文件大小在300KB以内。</p>-->
                    <el-upload
                            class="avatar-uploader"
                            ref="companyLogo"
                            :action="$uri + '/api/file/upload'"
                            :show-file-list="false"
                            accept="image/jpeg,image/png"
                            :on-success="corporateLogoSuccess"
                            :on-change="corporateLogoChange"
                            :file-list="corporateLogoFileList"
                            :data="{type:'2',orgId: $store.getters.getUserInfo.orgId,orgNum: $store.getters.getUserInfo.orgNum,companyId: $store.getters.getUserInfo.companyId}"
                            :auto-upload="false">
                        <img v-if="form.images.corporateLogo" :src="form.images.corporateLogo" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="主营行业：" prop="mainIndustry" required :rules="{required: true, message: '请选择主营行业', trigger: 'change'}">
                    <el-select v-model="form.mainIndustry" placeholder="请选择">
                        <el-option v-for="item in mainIndustrys" :key="item.value" :label="item.name" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="企业类型：" prop="companyType" required :rules="{required: true, message: '请选择企业类型', trigger: 'change'}">
                    <el-select v-model="form.companyType" placeholder="请选择">
                        <el-option v-for="item in companyTypes" :key="item.value" :label="item.name" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="年营业额：" prop="annualTurnover" required :rules="{required: true, message: '请选择年营业额', trigger: 'change'}">
                    <el-select v-model="form.annualTurnover" placeholder="请选择">
                        <el-option v-for="item in capitals" :key="item.value" :label="item.name" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="雇员人数：" prop="employee" required :rules="{required: true, message: '请选择雇员人数', trigger: 'change'}">
                    <el-select v-model="form.employee" placeholder="请选择">
                        <el-option v-for="item in employees" :key="item.value" :label="item.name" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
            </div>
            <p class="info">法人信息</p>
            <div>
                <el-form-item label="证件类型：" prop="legalPersonDocumentType" required :rules="{required: true, message: '请选择证件类型', trigger: 'change'}">
                    <el-select v-model="form.legalPersonDocumentType">
                        <el-option v-for="item in legalPersonDocumentTypes" :key="item.value" :label="item.name" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="上传身份附件：" required style="width: 850px;margin-bottom: 0">
<!--                    <p class="prompt">支持jpg、jpeg、png格式图片，大小不超过20M。</p>-->
                    <span style="float: left;">
                        <el-form-item prop="images.frontFace" required :rules="{required: true, message: '请上传身份证正面', trigger: 'change'}">
                            <el-upload
                                    class="avatar-uploader"
                                    ref="legalPersonImg1"
                                    :action="$uri + '/api/file/upload'"
                                    :show-file-list="false"
                                    accept="image/jpeg,image/png"
                                    :on-success="legalPersonImg1Success"
                                    :on-change="legalPersonImg1Change"
                                    :file-list="legalPersonImg1FileList"
                                    :data="{type:'2',orgId: $store.getters.getUserInfo.orgId,orgNum: $store.getters.getUserInfo.orgNum,companyId: $store.getters.getUserInfo.companyId}"
                                    :auto-upload="false">
                                <img v-if="form.images.frontFace" :src="form.images.frontFace" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                            <p style="margin: 0;line-height: 20px;width: 120px;text-align: center">法人身份证正面 （国徽面）</p>
                        </el-form-item>
                    </span>
                    <span style="float: left;">
                        <el-form-item prop="images.reverse" required :rules="{required: true, message: '请上传身份证反面', trigger: 'change'}">
                            <el-upload
                                    class="avatar-uploader"
                                    ref="legalPersonImg2"
                                    :action="$uri + '/api/file/upload'"
                                    :show-file-list="false"
                                    accept="image/jpeg,image/png"
                                    :on-success="legalPersonImg2Success"
                                    :on-change="legalPersonImg2Change"
                                    :file-list="legalPersonImg2FileList"
                                    :data="{type:'2',orgId: $store.getters.getUserInfo.orgId,orgNum: $store.getters.getUserInfo.orgNum,companyId: $store.getters.getUserInfo.companyId}"
                                    :auto-upload="false">
                                <img v-if="form.images.reverse" :src="form.images.reverse" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                            <p style="margin: 0;line-height: 20px;width: 120px;text-align: center">法人身份证反面（头像面）</p>
                        </el-form-item>
                    </span>
                    <span style="float: left;">
                        <el-form-item prop="images.handheld" required :rules="{required: true, message: '请上传手持身份证照片', trigger: 'change'}">
                            <el-upload
                                    class="avatar-uploader"
                                    ref="legalPersonImg3"
                                    :action="$uri + '/api/file/upload'"
                                    :show-file-list="false"
                                    accept="image/jpeg,image/png"
                                    :on-success="legalPersonImg3Success"
                                    :on-change="legalPersonImg3Change"
                                    :file-list="legalPersonImg3FileList"
                                    :data="{type:'2',orgId: $store.getters.getUserInfo.orgId,orgNum: $store.getters.getUserInfo.orgNum,companyId: $store.getters.getUserInfo.companyId}"
                                    :auto-upload="false">
                                <img v-if="form.images.handheld" :src="form.images.handheld" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                            <p style="margin: 0;line-height: 20px;width: 120px;text-align: center">手持身份证</p>
                        </el-form-item>
                    </span>
                </el-form-item>
                <el-form-item label="证件有效期：" required style="width: 850px;margin-bottom: 0">
                    <span style="float: left;">
                        <el-form-item prop="legalPersonStart" required :rules="{required: true, message: '请选择证件起始期限'}">
                            <el-date-picker :picker-options="pickerOptionstart" v-model="form.legalPersonStart" type="date" placeholder="请选择起始时间" style="width: 210px"></el-date-picker>
                        </el-form-item>
                    </span>
                    <span style="float: left;">&ensp;至&ensp;</span>
                    <span style="float: left;">
                        <el-form-item prop="legalPersonEnd" :rules="{required: !form.legalPersonLong, message: '请选择证件失效期限'}">
                            <el-date-picker :picker-options="pickerOptionend" :disabled="form.legalPersonLong" v-model="form.legalPersonEnd" type="date" placeholder="请选择失效时间" style="width: 210px"></el-date-picker>
                        </el-form-item>
                    </span>
                    <span style="margin-left: 10px"><el-checkbox v-model="form.legalPersonLong" @change="setLegalPerson">长期有效</el-checkbox></span>
                </el-form-item>
                <el-form-item label="法人姓名：" prop="legalPersonName" required :rules="{required: true, message: '请填写法人姓名'}" style="width: 750px;">
                    <el-input v-model="form.legalPersonName" placeholder="请填写法人姓名"></el-input>
                </el-form-item>
                <el-form-item label="法人性别：" prop="capital" required :rules="{required: true, message: '请选择法人性别', trigger: 'change'}">
                    <el-radio v-model="form.legalPersonGender" label="男"></el-radio>
                    <el-radio v-model="form.legalPersonGender" label="女"></el-radio>
                </el-form-item>
                <el-form-item label="证件号码" prop="legalPersonId" required :rules="{required: true, message: '请填写证件号码'}" style="width: 750px;">
                    <el-input v-model="form.legalPersonId" placeholder="请填写证件号码"></el-input>
                </el-form-item>
                <el-form-item label="手机号码：" prop="legalPersonPhone" required :rules="{required: true, message: '请填写手机号码'}" style="width: 750px;">
                    <el-input v-model="form.legalPersonPhone" placeholder="请输入手机号码"></el-input>
                    <span style="color: #AEAEAE;font-size: 12px;line-height: 25px;">请使用法人实名认证手机号码进行验证</span>
                </el-form-item>
            </div>
            <p class="info">其他资质证书</p>
            <div>
                <div v-for="(item,index) in form.certificates" :key="index">
                    <el-form-item label="资质证书：" required style="width: 850px;margin-bottom: 0">
                        <p class="prompt">1、经营"医疗、金融、代办、娱乐、保健、监控、危险品"等特殊行业请上传特种许可证或经营许可证。</p>
<!--                        <p class="prompt">2、支持jpg/png格式，文件大小10M以内。</p>-->
                        <span style="float: left;">
                            <el-form-item>
                                <el-upload
                                        class="avatar-uploader"
                                        :ref="'certificateImg' + index"
                                        :action="$uri + '/api/file/upload'"
                                        :show-file-list="false"
                                        accept="image/jpeg,image/png"
                                        :on-success="(res,file)=>{certificatesImgSuccess(item,res,file)}"
                                        :on-change="(file)=>{certificatesImgChange(item,index,file)}"
                                        :data="{type:'2',orgId: $store.getters.getUserInfo.orgId,orgNum: $store.getters.getUserInfo.orgNum,companyId: $store.getters.getUserInfo.companyId}"
                                        >
                                    <img v-if="item.url" :src="item.url" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                                <p style="margin: 0;line-height: 20px;width: 120px;text-align: center">资质证书</p>
                            </el-form-item>
                        </span>
                    </el-form-item>
                    <el-form-item label="证书编号：" style="width: 750px;">
                        <el-input v-model="item.certificateNum" placeholder="请填写证书编号"></el-input>
                    </el-form-item>
                    <el-form-item label="证件期限：" style="width: 850px;margin-bottom: 0">
                        <span style="float: left;">
                            <el-form-item>
                                <el-date-picker :picker-options="pickerOptionstart" v-model="item.certificateStartTime" type="date" placeholder="选择起始时间" style="width: 210px"></el-date-picker>
                            </el-form-item>
                        </span>
                            <span style="float: left;">&ensp;至&ensp;</span>
                            <span style="float: left;">
                            <el-form-item>
                                <el-date-picker :picker-options="pickerOptionend" :disabled="item.certificateDateLong" v-model="item.certificateEndTime" type="date" placeholder="选择失效时间" style="width: 210px"></el-date-picker>
                            </el-form-item>
                        </span>
                        <span style="margin-left: 10px"><el-checkbox v-model="item.certificateDateLong" @change="setCertificates(item)">长期有效</el-checkbox></span>
                    </el-form-item>
                    <el-form-item label="登记机关" style="width: 750px;">
                        <el-input v-model="item.registrationAuthority" placeholder="请填写登记机关"></el-input>
                    </el-form-item>
                    <el-form-item style="width: 750px;">
                        <el-button type="danger" @click="deleteCertificate">删除此证书</el-button>
                    </el-form-item>
                </div>
            </div>
            <el-form-item style="width: 750px;">
                <el-link icon="el-icon-circle-plus-outline" :underline="false" @click="addCertificates" style="font-weight: bold;font-size: 15px" type="primary">添加其他资质证书</el-link>
            </el-form-item>
            <el-form-item>
                <el-checkbox v-model="form.instructions" /> 我已阅读并同意 《众哲鑫平台服务使用协议》 众哲鑫平台有权自行或委托第三方，审查您提供的信息是否真实/有效，若提供虚假信息，由此带来的后果由本人承担。
            </el-form-item>
            <el-form-item>
                <el-button @click="resetForm" style="width: 100px;" size="medium">取消</el-button>
                <el-button @click="submit" style="width: 100px;" type="primary" size="medium">提交审核</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</template>

<script>
    import axios from "axios";
    import router from "../../../router";

    // 其他资质证书
    const certificates = {
        url: '',//证书图片
        certificateNum: '',//证书编号
        certificateStartTime: '',//证书起始时间
        certificateEndTime: '',//证书结束时间
        certificateDateLong: false,//证书长期有效
        registrationAuthority: '',//证书登记机关
    }

    export default {
        data() {
            return {
                isUpdate: false,
                form:{
                    documentType: '1',            //企业证件类型
                    certificate: '',            //企业证书
                    enterpriseName: '',         //企业名称
                    idCard: '',                 //证件号码
                    createTime: '',             //创建时间
                    businessPeriodStart: '',    //经营期限起始时间
                    businessPeriodEnd: '',      //经营期限失效时间
                    businessPeriodLong: false,  //经营期限长期有效
                    capital: '',                //注册资金
                    address: [],                //地址
                    detailedAddress: '',        //详细地址
                    registrationAuthority: '',  //登记机关

                    corporateLogo: '',          //企业Logo
                    mainIndustry: '',           //主营行业
                    companyType: '',            //企业类型
                    annualTurnover: '',         //年营业额
                    employee: '',               //雇员人数

                    legalPersonDocumentType: '1', //法人证件类型
                    frontFace: '',              //身份证正面
                    reverse: '',                //身份证反面
                    handheld: '',               //手持身份证
                    legalPersonStart: '',       //法人证件有效期起始时间
                    legalPersonEnd: '',         //法人证件有效期失效时间
                    legalPersonLong: false,     //法人证件有效期长期有效
                    legalPersonName: '',        //法人姓名
                    legalPersonGender: '男',    //法人性别
                    legalPersonId: '',          //证件号码
                    legalPersonPhone: '',       //手机号

                    certificates: [],           //其他证书
                    instructions: false,        //阅读须知

                    images: {
                        certificate:'',
                        corporateLogo:'',
                        frontFace:'',
                        reverse:'',
                        handheld:'',
                    },
                    selectAddress: {
                        checkStrictly: true,
                        lazy: true,
                        lazyLoad (node, resolve) {
                            const { level } = node;
                            let params = {};
                            if (level === 0){
                                params.parentCode = '100000'
                            }else {
                                params.parentCode = node.value
                            }
                            axios.get('http://cos.tpchain.net:9300/api/area/getAreaByParams', {
                                params: params
                            }).then((res) => {
                                const nodes = res.data.rows.map(item => ({
                                    value: item.areaCode,
                                    label: item.areaName,
                                }));
                                // 通过调用resolve将子节点数据返回，通知组件数据加载完成
                                resolve(nodes);
                            })
                        }
                    },       //地址
                },
                capitals:[
                    {value: '1', name: '1亿元以上'},
                    {value: '2', name: '5000万元-1亿元'},
                    {value: '3', name: '3000-5000万元'},
                    {value: '4', name: '2000-3000万元'},
                    {value: '5', name: '1000-2000万元'},
                    {value: '6', name: '700-1000万元'},
                    {value: '7', name: '500-700万元'},
                    {value: '8', name: '300-500万元'},
                    {value: '9', name: '200-300万元'},
                    {value: '10', name: '100-200万元'},
                    {value: '11', name: '50-100万元'},
                    {value: '12', name: '30-50万元'},
                    {value: '13', name: '10-30万元'},
                    {value: '14', name: '10万元以下'},
                ],  //资金
                mainIndustrys:[
                    {value: '1', name: '农业'},
                    {value: '2', name: '食品、饮料'},
                    {value: '3', name: '服装内衣'},
                    {value: '4', name: '纺织、皮革'},
                    {value: '5', name: '电工电气'},
                    {value: '6', name: '家用电器'},
                    {value: '7', name: '数码、电脑'},
                    {value: '8', name: '化工'},
                    {value: '9', name: '冶金矿产'},
                    {value: '10', name: '能源'},
                    {value: '11', name: '环保'},
                    {value: '12', name: '交通运输'},
                    {value: '13', name: '建筑、建材'},
                    {value: '14', name: '机械及行业设备'},
                    {value: '15', name: '家居用品'},
                    {value: '16', name: '医药健康'},
                    {value: '17', name: '礼品、工艺品、饰品'},
                    {value: '18', name: '运动、休闲'},
                    {value: '19', name: '仪器仪表'},
                    {value: '20', name: '玩具'},
                    {value: '21', name: '办公、文教'},
                    {value: '22', name: '五金、工具'},
                    {value: '23', name: '包装'},
                    {value: '24', name: '照明工业'},
                    {value: '25', name: '电子元器件'},
                    {value: '26', name: '传媒、广电'},
                    {value: '27', name: '精细化学品'},
                    {value: '28', name: '橡塑'},
                    {value: '29', name: '纸业'},
                    {value: '30', name: '安全、防护'},
                    {value: '31', name: '鞋包配饰'},
                    {value: '32', name: '通信产品'},
                    {value: '33', name: '汽摩及配件'},
                    {value: '34', name: '印刷'},
                    {value: '35', name: '商务服务'},
                    {value: '36', name: '教育培训'},
                    {value: '37', name: '二手设备'},
                    {value: '38', name: '航天航空'},
                ],// 行业
                companyTypes: [
                    {value: '1', name: '私营独资企业'},
                    {value: '2', name: '私营合伙企业'},
                    {value: '3', name: '私营有限责任公司'},
                    {value: '4', name: '私营股份有限公司'},
                    {value: '5', name: '国有企业'},
                    {value: '6', name: '集体企业'},
                    {value: '7', name: '股份合作企业'},
                    {value: '8', name: '联营企业'},
                    {value: '9', name: '有限责任公司'},
                    {value: '10', name: '有限责任公司（国有）'},
                    {value: '11', name: '有限责任公司（自然）'},
                    {value: '12', name: '一人有限责任公司'},
                    {value: '13', name: '其他有限责任公司'},
                    {value: '14', name: '股份有限公司'},
                    {value: '15', name: '其他内资企业'},
                    {value: '16', name: '三来一补'},
                    {value: '17', name: '法人分支机构'},
                    {value: '18', name: '农民专业合作经济组织'},
                    {value: '19', name: '港澳台合资经营企业'},
                    {value: '20', name: '中外合资经营企业'},
                    {value: '21', name: '外商独资企业'},
                    {value: '22', name: '中外合作经营企业'},
                    {value: '23', name: '外商投资股份企业'},
                    {value: '24', name: '其他'},
                    {value: '25', name: '个体经营'},
                    {value: '26', name: '政府机构'},
                    {value: '27', name: '非营利组织'},
                ],// 企业类型
                employees: [
                    {value: '1', name: '5~10人'},
                    {value: '2', name: '11~50人'},
                    {value: '3', name: '51~100人'},
                    {value: '4', name: '101~300人'},
                    {value: '5', name: '301~500人'},
                    {value: '6', name: '501~1000人'},
                    {value: '7', name: '1000人以上'},
                    {value: '8', name: '5人以下'},
                ],// 雇员人数
                documentTypes:[
                    {name:'企业法人营业执照', value: '1'},
                    {name:'事业单位法人证书', value: '2'},
                    {name:'个体工商营业登记证书', value: '3'},
                    {name:'民办非企业单位登记证书', value: '4'},
                    {name:'社会团体法人登记证书', value: '5'},
                    {name:'律师事务所执业许可证', value: '6'},
                    {name:'机构组织代码证', value: '7'},
                    {name:'批准设立或者核准登记文件', value: '8'},
                    {name:'其他', value: '9'},
                ],//企业证件类型
                legalPersonDocumentTypes:[
                    {name:'身份证', value: '1'},
                    {name:'护照', value: '2'},
                    {name:'港澳居民来往内地通行证', value: '3'},
                    {name:'台湾居民来往大陆通行证', value: '4'},
                ],//法人证件类型

                fileType: ['image/jpeg','image/png'],
                pickerOptionstart: {
                    disabledDate: (time) => {
                        return time.getTime() >= Date.now();
                    },
                },
                pickerOptionend: {
                    disabledDate: (time) => {
                        return time.getTime() < Date.now();
                    },
                },

                certificateImgFileList:[],
                corporateLogoFileList:[],
                legalPersonImg1FileList:[],
                legalPersonImg2FileList:[],
                legalPersonImg3FileList:[],
            }
        },
        mounted() {
            this.initUpdate()
        },
        methods:{
            initUpdate(){
                let that = this;
                var query = that.$router.currentRoute.query;
                let orgId = query.orgId
                this.$request('/api/agentCompany/queryAuthentication/1_0?orgId='+orgId, '', 'GET').then((data) => {
                    if(data.data.companyId != null && data.data.companyId != ''){
                        that.isUpdate = true
                        that.form = {...that.form, ...data.data}
                        that.form['images'] = {
                            certificate: that.form.certificate,
                            corporateLogo: that.form.corporateLogo,
                            frontFace: that.form.frontFace,
                            reverse: that.form.reverse,
                            handheld: that.form.handheld,
                        }
                        that.form['instructions'] = true
                        that.form['selectAddress'] = {
                            checkStrictly: true,
                            lazy: true,
                            lazyLoad (node, resolve) {
                                const { level } = node;
                                let params = {};
                                if (level === 0){
                                    params.parentCode = '100000'
                                }else {
                                    params.parentCode = node.value
                                }
                                axios.get('http://cos.tpchain.net:9300/api/area/getAreaByParams', {
                                    params: params
                                }).then((res) => {
                                    const nodes = res.data.rows.map(item => ({
                                        value: item.areaCode,
                                        label: item.areaName,
                                    }));
                                    // 通过调用resolve将子节点数据返回，通知组件数据加载完成
                                    resolve(nodes);
                                })
                            }
                        }
                    }
                })
            },
            addCertificates(){
                this.form.certificates.push({...certificates})
            },
            deleteCertificate(index){
                this.form.certificates.splice(index,1)
            },
            setBusinessPeriod(){
                if (this.form.businessPeriodLong) {
                    this.form.businessPeriodEnd = ''
                    this.$refs.form.clearValidate('businessPeriodEnd');
                }
            },
            setLegalPerson(){
                if (this.form.legalPersonLong){
                    this.form.legalPersonEnd = ' '
                    this.$refs.form.clearValidate('legalPersonEnd');
                }
            },
            setCertificates(item){
                if (item.certificateDateLong){
                    item.certificateEndTime = ''
                }
            },
            aaa(file) {
                request(file)
            },
            certificateImgSuccess(res, file) {
                this.form.certificate = this.$uri + res.fileEntities[0].path
                this.$refs.companyLogo.submit();

            },
            corporateLogoSuccess(res, file) {
                this.form.corporateLogo = this.$uri + res.fileEntities[0].path;
                this.$refs.legalPersonImg1.submit();
            },
            legalPersonImg1Success(res, file) {
                this.form.frontFace = this.$uri + res.fileEntities[0].path;
                this.$refs.legalPersonImg2.submit();
            },
            legalPersonImg2Success(res, file) {
                this.form.reverse = this.$uri + res.fileEntities[0].path;
                this.$refs.legalPersonImg3.submit();
            },
            legalPersonImg3Success(res, file) {
                this.form.handheld = this.$uri + res.fileEntities[0].path;
                if (!this.isUpdate){
                    this.submitData();
                }
            },
            certificatesImgSuccess(item,res,file){
                item.url = this.$uri + res.fileEntities[0].path;
            },
            certificateImgChange(file){
                if (this.beforeAvatarUpload(file.raw)){
                    this.certificateImgFileList = []
                    this.certificateImgFileList.push(file)
                    this.form.images.certificate = URL.createObjectURL(file.raw);
                    /*let a = JSON.stringify(this.form)
                    this.form = JSON.parse(a)*/
                    return
                }
                this.$refs.certificateImg.clearFiles()
            },
            corporateLogoChange(file){
                if (this.beforeAvatarUpload2(file.raw)){
                    this.corporateLogoFileList = []
                    this.corporateLogoFileList.push(file)
                    this.form.images.corporateLogo = URL.createObjectURL(file.raw);
                    return
                }
                this.$refs.companyLogo.clearFiles()
            },
            legalPersonImg1Change(file){
                if (this.beforeAvatarUpload(file.raw)){
                    this.legalPersonImg1FileList = []
                    this.legalPersonImg1FileList.push(file)
                    this.form.images.frontFace = URL.createObjectURL(file.raw);
                    return
                }
                this.$refs.legalPersonImg1.clearFiles()
            },
            legalPersonImg2Change(file){
                if (this.beforeAvatarUpload(file.raw)){
                    this.legalPersonImg2FileList = []
                    this.legalPersonImg2FileList.push(file)
                    this.form.images.reverse = URL.createObjectURL(file.raw);
                    return
                }
                this.$refs.legalPersonImg2.clearFiles()
            },
            legalPersonImg3Change(file){
                if (this.beforeAvatarUpload(file.raw)){
                    this.legalPersonImg3FileList = []
                    this.legalPersonImg3FileList.push(file)
                    this.form.images.handheld = URL.createObjectURL(file.raw);
                    return
                }
                this.$refs.legalPersonImg3.clearFiles()
            },
            certificatesImgChange(item, index,file){
                if (this.beforeAvatarUpload3(file.raw)){
                    return
                }
                this.$refs['certificateImg' + index].clearFiles()
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isPNG = file.type === 'image/png';
                const isLt20M = file.size / 1024 / 1024 < 20;

                if (!isJPG && !isPNG) {
                    this.$message.error('上传图片格式不正确!');
                }
                if (!isLt20M) {
                    this.$message.error('上传头像图片大小不能超过 20MB!');
                }
                return isPNG || isJPG && isLt20M;
            },
            beforeAvatarUpload2(file) {
                const isJPG = file.type === 'image/jpeg';
                const isPNG = file.type === 'image/png';
                const isLt300KB = file.size / 1024 < 300;

                if (!isJPG && !isPNG) {
                    this.$message.error('上传图片格式不正确!');
                }
                if (!isLt300KB) {
                    this.$message.error('上传头像图片大小不能超过 300KB!');
                }
                return isPNG || isJPG && isLt300KB;
            },
            beforeAvatarUpload3(file) {
                const isJPG = file.type === 'image/jpeg';
                const isPNG = file.type === 'image/png';
                const isLt10M = file.size / 1024 / 1024 < 10;

                if (!isJPG && !isPNG) {
                    this.$message.error('上传图片格式不正确!');
                }
                if (!isLt10M) {
                    this.$message.error('上传头像图片大小不能超过 10MB!');
                }
                return isPNG || isJPG && isLt10M;
            },
            resetForm(){
                this.$refs['form'].resetFields();
                this.form.certificates = []
            },
            submit(){
                if (!this.form.instructions){
                    this.$message({
                        message: '请先同意协议后点击提交审核',
                        type: 'warning'
                    });
                    return;
                }
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        if (!this.isUpdate){
                            this.$refs.certificateImg.submit();
                        }else {
                            this.uploadFile()
                        }
                    } else {
                        return false;
                    }
                });
            },
            submitData(){
                this.$request('/api/agentCompany/enterpriseCertification/1_0', this.form, 'POST').then((data) => {
                    this.$message({
                        message: data.message,
                        type:'success'
                    })
                    this.isUpdate = true
                })
            },
            updateData(){
                axios.post(this.$uri + '/api/agentCompany/updateAuthentication/1_0', this.form).then((res) => {
                    this.$message({
                        message: res.data.message,
                        type:'success'
                    })
                })
                /*this.$request('/api/agentCompany/updateAuthentication/1_0', this.form, 'POST').then((data) => {
                    this.$message({
                        message: data.message,
                        type:'success'
                    })
                })*/
            },
            async uploadFile(){
                let that = this
                if (that.certificateImgFileList !== null && that.certificateImgFileList.length !== 0){
                    let res1 = await that.$requestUploadFile('/api/file/upload', {file: that.certificateImgFileList,type: '2'})
                    this.form['certificate'] = this.$uri + res1.fileEntities[0].path;
                }
                if (that.corporateLogoFileList !== null && that.corporateLogoFileList.length !== 0){
                    let res2 = await that.$requestUploadFile('/api/file/upload', {file: that.corporateLogoFileList,type: '2'})
                    this.form['corporateLogo'] = this.$uri + res2.fileEntities[0].path;
                }
                if (that.legalPersonImg1FileList !== null && that.legalPersonImg1FileList.length !== 0){
                    let res3 = await that.$requestUploadFile('/api/file/upload', {file: that.legalPersonImg1FileList,type: '2'})
                    this.form['frontFace'] = this.$uri + res3.fileEntities[0].path;
                }
                if (that.legalPersonImg2FileList !== null && that.legalPersonImg2FileList.length !== 0){
                    let res4 = await that.$requestUploadFile('/api/file/upload', {file: that.legalPersonImg2FileList,type: '2'})
                    this.form['reverse'] = this.$uri + res4.fileEntities[0].path;
                }
                if (that.legalPersonImg3FileList !== null && that.legalPersonImg3FileList.length !== 0){
                    let res5 = await that.$requestUploadFile('/api/file/upload', {file: that.legalPersonImg3FileList,type: '2'})
                    this.form['handheld'] = this.$uri + res5.fileEntities[0].path;
                }
                this.updateData()
            },
        }
    }
</script>

<style scoped>
    .info{
        font-size: 16px;
        color: #333;
        margin-bottom: 20px;
        line-height: 38px;
        background-color: #f8f8f8;
        padding: 0 20px;
    }
    .el-form-item {
        margin-bottom: 30px;
    }
    .form .prompt{
        margin: 0;
        color: #AEAEAE;
        font-size: 12px;
        line-height: 25px;
    }
</style>
<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 110px;
        height: 110px;
        line-height: 110px;
        text-align: center;
    }
    .avatar {
        width: 110px;
        height: 110px;
        display: block;
    }
</style>